import React from 'react';
import { connect } from 'dva'
import queryString from 'query-string'
import {
  Select,
  Card,
  Spin,
  Tag
} from 'antd'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import LwjCardTable from 'components/LwjCardTable/LwjCardTable';

const couponsCardList = ({ location, dispatch, coupon, loading }) => {

  location.query = queryString.parse(location.search);
  const { items, pagination, currentDistributor, distributorList, usedAmount } = coupon;

  const breadcrumbList = [
    {
      title: '营销管理'
    }, {
      title: '优惠券'
    }
  ];

  const cardListProps = {
    dataSource: items,
    loading: loading.effects['coupon/queryByDistributor'],
    pagination,
    pageChangeAction: 'coupon/queryByDistributor',
    dispatch,
    location,
    total: pagination.total
  };
  const handleChange = (value) => {
    const distributor = distributorList.find(shop => shop.id === value);
    dispatch({
      type: 'coupon/setCurrentDistributor',
      payload: distributor
    })
    dispatch({
      type: 'coupon/queryByDistributor',
      payload: {
        distributorId: value
      }
    })
  }
  // 定义筛选属性 表单相关

  const option = (value) => value.map(option => {
    return <Select.Option value={option.id} key={option.id}>{option.organizationName}</Select.Option>
  })
  return (
    <Spin spinning={loading.global}>
      <PageHeaderLayout title="优惠券" breadcrumbList={breadcrumbList}>
        <Card bordered={true}>
          <Select
            showSearch
            id="choose"
            value={currentDistributor.id}
            defaultValue={currentDistributor.id}
            style={{
              width: 300,
              marginRight: 8
            }}
            placeholder="筛选门店"
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            onChange={handleChange}>
            {option(distributorList)}
          </Select>
          <div style={{ marginTop: 10 }}>
            <h2 style={{ marginLeft: 5 }}>门店：{currentDistributor.organizationName}</h2>
          </div>
          <div style={{ marginTop: 10, marginLeft: 10 }}>
            优惠券使用总金额：<Tag color="red">¥ {usedAmount}</Tag>
          </div>
        </Card>
        <Card bordered={false}>
          <div style={{ marginTop: 10 }}>
            <LwjCardTable {...cardListProps} />
          </div>
        </Card>
      </PageHeaderLayout>
    </Spin>
  )
};

export default connect(({ coupon, app, loading }) => ({ coupon, app, loading }))(couponsCardList)
